import React from 'react'
import { Button, Card, Divider, Toast } from 'antd-mobile'
import styles from './ServiceSection.module.scss'
import { AntOutline, RightOutline } from 'antd-mobile-icons'
import img1 from '../../assets/images/b1.jpg'
import img2 from '../../assets/images/b2.jpg'
import img3 from '../../assets/images/b3.jpg'
import img4 from '../../assets/images/b4.jpg'
import img5 from '../../assets/images/b5.jpg'
import img6 from '../../assets/images/b6.jpg'
import img7 from '../../assets/images/b7.jpg'

const ServiceSection = () => {
    const largeCardsData = [
        img1, img2,
    ];
    const middleCardsData=[
         img3,
        img4,
    ]

    // 小卡片数据（示例）
    const smallCardsData = [
       
        img5,
        img6,
        img7

    ];

    return (
        <div>
            <Card title={<div className={styles.tpobxo}><span className={styles.topb1}>特色服务</span><span className={styles.topb2}>一站式医疗健康解决方案</span></div>} extra={<div className={styles.extr}><span>查看更多</span><RightOutline /></div>}>
                <div className={styles.largeCards}>
                    {largeCardsData.map((it, index) => (
                        <div key={index} className={styles.largeCard}>
                            <img src={it} alt={`large-card-${index}`} className={styles.largeCardImg} />
                        </div>
                    ))}
                </div>
                <div className={styles.middleCards}>
                    {middleCardsData.map((it, index) => (
                        <div key={index} className={styles.middleCard}>
                            <img src={it} alt={`large-card-${index}`} className={styles.middleCardImg} />
                        </div>
                    ))}
                </div>
                <div className={styles.smallCards}>
                    {smallCardsData.map((img, ind) => (
                        <div key={ind} className={styles.smallCard}>
                            <img src={img} alt={`small-card-${ind}`} className={styles.smallCardImg} />
                        </div>
                    ))}
                </div>
            </Card>
        </div>
    )
}

export default ServiceSection
